<!-- From Uiverse.io by ardianhu  - Tags: input, dark, minimal, colorful, terminal, login, prompt, command, authentication, shell, register -->
<div class="terminal p-5 rounded-lg font-mono min-w-[480px]">
  <div
    class="terminal-header bg-zinc-700 text-white p-2 rounded-t-lg flex items-center"
  >
    <span class="text-red-500 text-5xl leading-[0px] align-middle -mt-2"
      >•</span
    >
    <span class="text-yellow-500 text-5xl leading-[0px] align-middle -mt-2 ml-1"
      >•</span
    >
    <span class="text-green-500 text-5xl leading-[0px] align-middle -mt-2 ml-1"
      >•</span
    >
    <span class="ml-4 align-baseline">authentication --- bash - zsh </span>
  </div>
  <div class="pl-4 pt-2 bg-gray-900 max-h-[500px] overflow-auto" id="output">
    <p class="text-gray-500">You need to authenticate to continue!</p>
    <p class="text-sky-300">Enter 1 to login</p>
    <p class="text-sky-300">Enter 2 to register</p>
  </div>
  <div
    class="input flex pl-4 bg-gray-900 pb-4 rounded-b-lg items-center"
    id="terminal-input-container"
  >
    <span class="text-green-500">➝</span>
    <span class="text-sky-300 ml-2">~</span>
    <span class="ml-2 text-md text-gray-500" id="placeholder"></span>
    <input
      class="bg-transparent border-none outline-none ring-0 focus:ring-0 text-amber-400 w-full"
      id="terminal-input"
      type="text"
    />
  </div>
</div>


    